<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%">
                <div style="float:left">
                    <table border="0" style="font-size:12px;white-space: nowrap;max-width: 1190px;">
                        <tr>
                            <td align="right" style="width:60px">采样时间</td>
                            <td>
                                <el-date-picker v-model="create_startdt" :clearable="false" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:173px;">
                                </el-date-picker>
                            </td>
                            <td>至</td>
                            <td>
                                <el-date-picker v-model="create_enddt" type="datetime" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:173px;">
                                </el-date-picker>
                            </td>
                            <td align="right" style="width:60px">统计方式</td>
                            <td align="right">
                                <template>
                                    <el-radio v-model="TJmethon" label="H">横向</el-radio>
                                    <el-radio v-model="TJmethon" label="Z">纵向</el-radio>
                                </template>
                            </td>
                            <td align="right" style="width:80px">标本工作组</td>
                            <td>
                                <rm-ddl-common @change="specimengroupchange" datatype="labgroup" dataname="标本工作组" v-model="specimengroupval" width="160px"></rm-ddl-common>
                            </td>
                            <td align="right" style="width:80px">人员工作组</td>
                            <td>
                                <rm-ddl-common @change="employgroupchange" datatype="labgroup" dataname="人员工作组" v-model="employgroupval" width="150px"></rm-ddl-common>
                            </td>
                            <td align="right" style="width:60px">采样人</td>
                            <td>
                                <el-select v-model="employeeval" placeholder="" style="width:80px" @dblclick.native="popMultipleChk(employeeval,'employeeval',EmployeeOption,'采样人选择')" filterable clearable>
                                    <el-option v-for="(item,index) in EmployeeOption" :key="index" :value="item.data" :label="item.display"></el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" style="width:60px">标本状态</td>
                            <td colspan="3">
                                <template>
                                    <el-radio v-model="specimenflag" label="qb">全部</el-radio>
                                    <el-radio v-model="specimenflag" label="ycy">已采样</el-radio>
                                    <el-radio v-model="specimenflag" label="yjs">已接收</el-radio>
                                    <el-radio v-model="specimenflag" label="wjs">未接收</el-radio>
                                </template>
                            </td>
                            <td align="right" style="width:60px">病人类型</td>
                            <td align="right">
                                <el-select v-model="txtPatType" placeholder="" style="width:120px" @dblclick.native="popMultipleChk(txtPatType,'txtPatType',PTOption,'病人类型选择')" filterable clearable>
                                    <el-option v-for="(item,index) in PTOption" :key="index" :value="item.data" :label="item.display"></el-option>
                                </el-select>
                            </td>
                            <td align="right">时间段</td>
                            <td>
                                <el-time-picker is-range v-model="timevalue1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" style="width:160px" :clearable="false" value-format="HH:mm" format="HH:mm">
                                </el-time-picker>
                            </td>
                            <td align="right" style="width:80px">申请科室</td>
                            <td>
                                <el-select v-model="departmentval" placeholder="" style="width:150px" @dblclick.native="popMultipleChk(departmentval,'departmentval',DepartmentOption,'申请科室选择')" filterable clearable>
                                    <el-option v-for="(item,index) in DepartmentOption" :key="index" :value="item.data" :label="item.display"></el-option>
                                </el-select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="float:right;margin-right:5px">
                    <el-button icon="el-icon-search" type="primary" @click="InitPageDate()" v-has="'PINQUERY'">查询</el-button>
                    <el-button icon="el-icon-close" @click="ClearCondition()">清除</el-button>
                    <el-button icon="el-icon-sort" @click="dialogVisible=true">排序</el-button>
                    <!--v-has="'PSORT'"-->
                    <el-button icon="el-icon-download" @click="ExportCsv()" v-has="'PEXPORT'">导出</el-button>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <vxe-grid :columns="tableColumn" :loading="loading" :keyboard-local-config="keyConfig" :data.sync="tableData" :row-class-name="rowClassName" header-align="center" :select-config="selectConfig" border height="auto" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe @current-change="currentChangeEvent"></vxe-grid>
            </div>
        </div>

        <el-dialog title="排序" :visible.sync="dialogVisible" width="50%">
            <div>
                <vxe-table :data.sync="tableDates" border style="width: 100%" height="300" :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" highlight-current-row highlight-hover-row resizable size="mini" show-overflow ref="ddlTableSort">
                    <vxe-table-column field="sortcolumn" title="排序栏" width="200">
                        <template v-slot="{row}">
                            <el-select v-model="row.sortcolumn">
                                <el-option v-for="item in getsortoptions" :value="item.value" :key="item.label" :label="item.value"></el-option>
                            </el-select>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="defaultsort" title="排序选择" show-overflow-tooltip width="200" align="center">
                        <template v-slot="{row}">
                            <el-radio v-model="row.defaultsort" label="1">升序</el-radio>
                            <el-radio v-model="row.defaultsort" label="2">降序</el-radio>
                        </template>
                    </vxe-table-column>
                </vxe-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button icon="el-icon-plus" @click="addsortrecord">新增</el-button>
                <el-button icon="el-icon-minus" @click="delsortrecord">删除</el-button>
                <el-button icon="el-icon-caret-top" @click="insertsortrecord">插入</el-button>
                <el-button icon="el-icon-delete" @click="clearsortrecord">清除</el-button>
                <el-button icon="el-icon-circle-check" @click="savesortrecord">确定</el-button>
                <el-button icon="el-icon-circle-close" @click="dialogVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!--多选弹窗--->
        <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
            <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    name: "REQ146",
    data() {
        return {
            TJmethon: "H",
            specimenflag: "qb",
            SampleDatetime: ["", ""],
            create_startdt: "",
            create_enddt: "",
            employgroupval: "",
            departmentval:"",
            employeeval:"",
            specimengroupval: "",
            txtPatType: "",
            PTOption: [],
            DepartmentOption: [],
            EmployeeOption: [],
            tableColumn: [],
            tableData: [],
            tableDates: [],
            fieldname: "",
            option2: [],
            option1: [],
            multichktitle: "",
            dialogVisible: false,
            dialogMultipleVisible: false,
            getsortoptions: [{ label: "", value: "" }, { label: "采样日期", value: "collect_day" }, { label: "@cp_collectuser", value: "@cp_collectuser" }],
            keyConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
                isEdit: true
            },
            selectConfig: {
                tigger: "row"
            },
            timevalue1: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
            loading: false,
            callwindow: "",
            onlylocalwindow: "",
        };
    },
    created() {
        this.InitDate(); //初始化日期
        this.ddlInitData(); //初始化下拉框的数据
        //this.InitPageDate(); //初始化主列表
    },
    mounted() {},
    updated() {},
    methods: {
        popMultipleChk(e, fieldname, option, title) {
            let temp = XEUtils.clone(option, true);
            this.option1 = [];
            this.option2 = [];
            if (e != "") {
                let k = e.split(",");
                k.forEach(item => {
                    let ndata = temp.find(m => m.data == item);
                    if (ndata != undefined && ndata != null) {
                        this.option2.push(ndata);
                    }
                });
                temp.forEach(item => {
                    if (k.indexOf(item.data + "") < 0) {
                        this.option1.push(item);
                    }
                });
            } else {
                this.option1 = temp;
            }
            this.fieldname = fieldname;
            this.multichktitle = title;
            this.dialogMultipleVisible = true;
        },
        closedialog(value, name) {
            if (value != "close") {
                this[name] = value;
            }
            this.dialogMultipleVisible = false;
        },
        employgroupchange(code, name) {
            this.employgroupval = code;
            this.employeeval = '';
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ146",
                    method: "post",
                    data: {
                        action: "EmployeeOption",
                        employgroupval: this.employgroupval,
                    }
                })
                .then(res => {
                    this.EmployeeOption = res.employeeoption;
                });
        },
        specimengroupchange(code, name) {
            this.specimengroupval = code;
        },
        ClearCondition() {
            this.InitDate();
            this.TJmethon = "H";
            this.specimengroupval = "";
            this.employgroupval = "";
            this.specimenflag = "qb";
            this.txtPatType = "";
            this.timevalue1 = [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)];
        },
        InitDate() {
            var myDate = new Date(); //获取当前年份(2位)
            var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
            var day = myDate.getDate(); //获取当前日(1-31)
            // var hour = myDate.getHours();
            // var minute = myDate.getMinutes();
            // var second = myDate.getSeconds();
            var dayNow = year + "-" + (month + 1) + "-" + day;
            // this.SampleDatetime = [dayNow, dayNow];
            this.create_startdt = XEUtils.toDateString(myDate,"yyyy-MM-dd 00:00:00");
            this.create_enddt = XEUtils.toDateString(myDate,"yyyy-MM-dd 23:59:59");
        },
        currentChangeEvent({ row }) {},
        rowClassName({ row, column }) {
            if (row.newcollect_day == "小计") {
                return "row-modify";
            }
            if (row.newcollect_day == "合计") {
                return "row-modify2";
            }
        },
        ddlInitData() {
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ146",
                    method: "post",
                    data: {
                        action: "ddlInitData"
                    }
                })
                .then(res => {
                    this.PTOption = res.dt2;
                    this.DepartmentOption = res.departmentoption;
                    this.EmployeeOption = res.employeeoption;

                    this.onlylocalwindow = res.onlylocalwindow;
                    this.callwindow = res.callwindow;
                });
        },
        savesortrecord() {
            this.dialogVisible = false;
            let tabledata = this.$refs.ddlTableSort.tableData;
            tabledata.forEach(item => {
                if (item.defaultsort != "" && item.sortcolumn != "") {
                    let sortcolumn = item.sortcolumn;
                    if (this.tableDates.indexOf(item) < 0) {
                        let k = false;
                        this.tableDates.forEach(item => {
                            if (item.sortcolumn == sortcolumn) {
                                k = true;
                            }
                        });
                        if (!k) {
                            this.tableDates.push(item);
                        }
                    }
                }
            });
            this.InitPageDate();
        },
        InitPageDate() {
            this.loading = true;
            var time1 = this.timevalue1[0];
            var time2 = this.timevalue1[1];
            if (typeof time1 == "object") {
                time1 = XEUtils.toDateString(this.timevalue1[0], "HH:mm");
                time2 = XEUtils.toDateString(this.timevalue1[1], "HH:mm");
            }
            this.$tool
                .request({
                    url: "REQ/REQ1/REQ146",
                    method: "post",
                    data: {
                        action: "query",
                        sampletime1: this.create_startdt, //SampleDatetime[0], //datetimevalue1,
                        sampletime2: this.create_enddt, //SampleDatetime[1], //datetimevalue2,
                        employgroup: this.employgroupval,
                        TJways: this.TJmethon,
                        specimengroup: this.specimengroupval,
                        sampleflag: this.specimenflag,
                        pattype: this.txtPatType,
                        departmentval: this.departmentval,
                        employeeval : this.employeeval,
                        timespan1: time1,
                        timespan2: time2,
                        sortstr: this.tableDates,

                        onlylocalwindow: this.onlylocalwindow,
                        callwindow: this.callwindow,
                    }
                })
                .then(res => {
                    var collist = [
                        // {
                        //     title: "NO.",
                        //     type: "index",
                        //     align: "center",
                        //     width: 50,
                        // },
                    ];
                    for (let i = 0, len = res.RData.Cols.length; i < len; i++) {
                        let colitem = {};
                        const item = res.RData.Cols[i];
                        colitem = {
                            field: item.field,
                            title: item.title,
                            width: item.width
                        };
                        collist.push(colitem);
                    }
                    this.tableColumn = collist;
                    this.tableData = res.RData.Data;
                    this.loading = false;
                })
                .catch(e => {
                    this.loading = false;
                    console.log(e);
                });
        },
        ExportCsv() {
            let options = {
                filename: "REQ146 门诊采样统计"
            };
            this.$refs.xTable.exportCsv(options);
        },
        addsortrecord() {
            this.$refs.ddlTableSort.insert({ sortcolumn: "", defaultsort: "1" });
        },
        delsortrecord() {
            var delrow = this.$refs.ddlTableSort.getCurrentRow();
            if (delrow) {
                this.$refs.ddlTableSort.remove(delrow);
            } else {
                this.$message({
                    message: "请先选中要删除的排序！",
                    type: "warning"
                });
            }
        },
        insertsortrecord() {
            var crow = this.$refs.ddlTableSort.getCurrentRow();
            if (crow) {
                this.$refs.ddlTableSort.insertAt({ sortcolumn: "", defaultsort: "1" }, crow);
            } else {
                this.$refs.ddlTableSort.insert({ sortcolumn: "", defaultsort: "1" });
            }
        },
        clearsortrecord() {
            this.tableDates = [];
        }
    }
};
</Script>

<style scoped>
.pagetop {
    /* width: 100%;
    height: 100px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;*/
    width: 100%;
    left: 0;
    right: 0;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 100px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagecenter {
    position: absolute;
    top: 105px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}

::v-deep .middle-center tr.vxe-body--row.row-modify {
    color: blue !important;
}
::v-deep .middle-center tr.vxe-body--row.row-modify2 {
    color: blue !important;
    font-weight: bold;
}
.el-radio {
    margin-right: 10px;
}
::v-deep .el-range-editor--small.el-input__inner {
    height: 26px;
}
::v-deep .el-range-editor--small .el-range-separator {
    line-height: 18px;
    font-size: 13px;
}
::v-deep .el-range-editor--small .el-range__icon {
    line-height: 18px;
}
::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border: 4px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 4px 4px 4px 0;
    border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 4px 0 4px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
</style>